<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/Top.jsp" %>

<div id="BackLink">
    <a href="index.jsp">返回主页面>></a>
</div>

<div class="table-contain">
    <div class="cart-title">

    </div>
    <div>
        <form action="/Cart" method="post">
            <table id="cartTable">
                <tr>
                    <th id="NullHeader"></th>
                    <th>商品编号</th>
                    <th>商品图片</th>
                    <th>商品名</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>总价</th>
                </tr>
                <c:if test="${fn:length(sessionScope.cartList) == 0}">
                    <tr>
                        <td colspan="7">购物车空空如也...</td>
                    </tr>
                </c:if>
                <c:set var="all" value="0"></c:set>
                <c:forEach items="${sessionScope.cartList}" var="cart" varStatus="count">
                    <tr id="tr${cart.cartid}" >
                        <td><input type="checkbox" name="ck${count.index}" class="checkOrder" id="ck${count.index}" data-id="${cart.cartid}" onchange="
                                if($('input[id=' + this.id + ']').prop('checked')){
                                    addItem(${count.index});
                                }else{
                                    delItem(${count.index});
                                }"></td>
                        <td>${cart.productid}</td>
                        <td>${cart.imageSrc}</td>
                        <td>${cart.name}</td>
                        <td>￥${cart.unitprice}</td>
                        <td><input type="number" id="num${count.index}" name="num${count.index}" class="numberBox" value="${cart.num}" min="1" onchange="changeNum(${count.index},${cart.unitprice})"></td>
                        <td>￥<label id="prc${count.index}">${cart.price}</label></td>
                    </tr>
                    <c:set var="all" value="${all + cart.price}"></c:set>
                </c:forEach>
                <script>
                    var all     = ${all},
                        len     = ${fn:length(sessionScope.cartList)},
                        sum     = 0,
                        num     = 0;

                    function allCheck() {
                        var flag = $("input[name=checkBox]").prop("checked");
                        for (var i = 0;i < len;i++){
                            $("input[id=ck" + i + "]").prop("checked", flag);
                        }
                        controlAll(flag);
                    }

                    function controlAll(flag){
                        if(flag){
                            sum = all;
                            num = len;
                        }else{
                            sum = num = 0;
                        }
                        $('#cartSum').text('￥' + sum);
                        $('#cartNum').text(num);
                    }

                    function addItem(index){
                        sum += parseInt($("#prc" + index).text());
                        num++;
                        $('#allcheck').prop('checked', sum === all);
                        $('#cartSum').text('￥' + sum);
                        $('#cartNum').text(num);
                    }

                    function delItem(index){
                        sum -= parseInt($("#prc" + index).text());
                        num--;
                        $('#allcheck').prop('checked', sum === all);
                        $('#cartSum').text('￥' + sum);
                        $('#cartNum').text(num);
                    }

                    function changeNum(index, unitprice){
                        var elPrc = $('#prc' + index);
                        var num = parseInt($("#num" + index).val());
                        if(Math.sign(num) <= 0){
                            return;
                        }
                        var newPrice = num * unitprice;
                        if($("input[id=ck" + index + "]").prop("checked")){
                            sum += newPrice - parseInt($("#prc" + index).text());
                            $("#cartSum").text("￥" + sum);
                        }
                        all += newPrice - parseInt(elPrc.text());
                        elPrc.text(num * unitprice);
                    }
                    function getList(){
                        var list = [];
                        for (var i = 0; i < len; i++){
                            if($('#ck' + i).prop('checked')){
                                list.push($('#ck' + i).data('id'));
                            }
                        }
                        return list;
                    }
                    function deleteCart(){
                        var list = getList();
                        var URL = 'DeleteCart?';
                        for (var i = 0, l = list.length; i < l; i++){
                            URL += 'id' + i + '=' + list[i];
                            if (i < l - 1){
                                URL += '&';
                            }
                        }
                        $.ajax({
                            type        : 'POST',
                            url         : URL,
                            success     : function (data){
                                if(data === 'Success'){
                                    for (var i = 0, l = list.length; i < l; i++){
                                        var elTr = $('#tr' + list[i]);
                                        sum -= parseInt(elTr.find('label').text());
                                        num--;
                                        elTr.remove();
                                    }
                                    $('#cartSum').text('￥' + sum);
                                    $('#cartNum').text(num);
                                    alert('删除成功');
                                }else {
                                    alert('删除失败');
                                }
                            },
                            error   : function (errorMsg){
                                console.log(errorMsg);
                            }
                        });
                    }
                </script>
            </table>
            <div id="finalRow">
                <div class="check-item">
                    <label for="allcheck">全选</label>
                    <input type="checkbox" class="checkOrder" name="checkBox" id="allcheck" onclick="allCheck('checkBox', 'checkItem')">
                </div>
                <div class="normal-item">
                    <a class="orderLink" onclick="deleteCart();">删除</a>
                </div>
                <div class="normal-item">
                    <label class="normal-text">你已选择了</label>
                    <label id="cartNum">0</label>
                    <label class="normal-text">项商品</label>
                </div>
                <div class="normal-item">
                    <label class="normal-text">当前选择商品总价为：</label>
                    <label id="cartSum">￥0</label>
                </div>
                <input class="product-form-submit" id="cart-submit" type="submit" value="结算购物车">
            </div>
        </form>
    </div>
</div>

<%@ include file="../common/Bottom.jsp" %>
